<!-- 分销订单  -->
<template>
	<s-layout class="admin-order" title="管理订单">
		<view class="order-list">
			<view v-for="(item, index) in state.orderList" :key="index"
			      class="order-item"

			>
				<view class="order-item-user">
					{{ item.user }}
				</view>
				<view class="order-item-nikename">
					{{ item.nikename }}
				</view>
				<view class="order-item-product">
					{{ item.product }}
				</view>
				<view class="order-item-price">
					{{ item.price }}
				</view>
				<view class="order-item-time">
					{{ item.time }}
				</view>
				<view class="order-item-status">
					{{ item.status }}
				</view>
				<view v-if="!!item.no" class="order-item-no">
					{{ item.no }}
				</view>
				<view class="order-item-action">
					<button class="order-item-action-btn b-send" @click="handleSend(item.id)">
						发货
					</button>
					<button class="order-item-action-btn b-back" @click="handleBack(item.id)">
						确认归还
					</button>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {onLoad, onReachBottom} from '@dcloudio/uni-app';
import {computed, reactive} from 'vue';


const state = reactive({
	pagination: {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	},
	orderList: [{
		id: 1,
		user: '张三',
		nikename: '张三',
		product: '商品1',
		price: '100',
		time: '2022-01-01',
		status: '待发货'
	},
		{
			id: 2,
			user: '张三',
			nikename: '张三',
			product: '商品2',
			price: '120',
			time: '2022-01-01',
			status: '待发货',
			no: '223344'
		},
		{
			id: 3,
			user: '张三',
			nikename: '张三',
			product: '商品3',
			price: '130',
			time: '2022-01-01',
			status: '待发货',
			no: '123456'
		},
		{
			id: 4,
			user: '张三',
			nikename: '张三',
			product: '商品4',
			price: '14',
			time: '2022-01-01',
			status: '待归还',
			no: '123456'
		},
		{
			id: 5,
			user: '张三',
			nikename: '张三',
			product: '商品1',
			price: '100',
			time: '2022-01-01',
			status: '待归还',
			no: '123456'
		}
	]
});

onLoad(() => {
	// getAgentInfo();
	// getOrderList();
	console.info("默认加载");
});

function handleSend(id) {

}

function handleBack(id) {

}


// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		// getOrderList(state.pagination.current_page + 1);

	}
}

// 上拉加载更多
onReachBottom(() => {
	loadmore();
});
</script>

<style lang="scss" scoped>
.admin-order {
	.order-list {

		margin-bottom: 20px;
		display: flex;
		flex-direction: column;

		.order-item {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			padding: 10px 20px;
			border-bottom: 1px solid #eee;

			view{
				margin:3px;
				padding: 2px 5px;
			}

			.order-item-user {
				width: 50%;
			}

			.order-item-nikename {
				width: 30%;
			}

			.order-item-product {
				width: 150px;
			}

			.order-item-price {
				width: 60px;
			}

			.order-item-time {
				width: 80px;
			}

			.order-item-status {
				width: 80px;
			}

			.order-item-no {
				width: 100%;
				color:#2a2deb;
				font-size: 14px;
				font-weight: 700;
			}
			.order-item-action {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.order-item-action-btn {
					background-color: #2a8eeb;
					width: 120px;
					height: 40px;
					border-radius: 10px;
					border:1px solid #eee;
					font-size: 16px;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}

			}
		}
	}

}
</style>
